<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斗地主排行榜</title>
    <link rel="stylesheet" th:href="@{/js/lib/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/js/lib/fontawesome/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/css/ranking.css}">
    <style>
        /* 导航栏样式 */
        .navbar {
            padding: 0.5rem 1rem;
            background: linear-gradient(135deg, #1e88e5, #1565c0);
        }
        
        .navbar-brand {
            font-size: 1.2rem;
            font-weight: 600;
        }

        /* 主体内容样式 */
        body {
            background: #f8f9fa;
            -webkit-tap-highlight-color: transparent;
            padding-bottom: env(safe-area-inset-bottom);
        }

        .ranking-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        }

        /* 标签页样式 */
        .nav-tabs {
            border: none;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .nav-tabs .nav-link {
            border: none;
            color: #666;
            font-weight: 500;
            padding: 10px 25px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .nav-tabs .nav-link.active {
            background: #1976d2;
            color: white;
        }

        /* 排行榜项目样式 */
        .ranking-item {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 10px;
            background: #f8f9fa;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .ranking-item:hover {
            transform: translateX(5px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .rank-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .rank-number {
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            border-radius: 50%;
            font-weight: bold;
            font-size: 1.1em;
        }

        .player-name {
            font-size: 1.1em;
            font-weight: 500;
            color: #2c3e50;
        }

        .stats-value {
            font-weight: bold;
            color: #1976d2;
            font-size: 1.1em;
        }

        /* 返回按钮 */
        .back-btn {
            margin-bottom: 20px;
            padding: 8px 20px;
            border-radius: 20px;
            background: #f8f9fa;
            border: none;
            color: #666;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            background: #e9ecef;
            transform: translateX(-5px);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .ranking-container {
                margin: 1rem;
                padding: 15px;
            }

            .nav-tabs .nav-link {
                padding: 8px 15px;
                font-size: 0.9em;
            }

            .ranking-item {
                padding: 12px 15px;
            }

            .rank-number {
                width: 30px;
                height: 30px;
                line-height: 30px;
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="fragments/navbar :: navbar('斗地主排行榜', 'fas fa-trophy')"></nav>

    <div class="ranking-container">
        <!-- 排行榜标签页 -->
        <ul class="nav nav-tabs" id="rankingTabs">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#scoreRanking">
                    <i class="fas fa-star me-2"></i>积分排行
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#winRateRanking">
                    <i class="fas fa-percentage me-2"></i>胜率排行
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#achievementRanking">
                    <i class="fas fa-trophy me-2"></i>成就排行
                </a>
            </li>
        </ul>

        <!-- 排行榜内容 -->
        <div class="tab-content">
            <div class="tab-pane fade show active" id="scoreRanking">
                <div class="ranking-list" id="scoreRankingList">
                    <!-- 积分排行榜将通过JavaScript动态加载 -->
                </div>
            </div>
            
            <div class="tab-pane fade" id="winRateRanking">
                <div class="ranking-list" id="winRateRankingList">
                    <!-- 胜率排行榜将通过JavaScript动态加载 -->
                </div>
            </div>
            
            <div class="tab-pane fade" id="achievementRanking">
                <div class="ranking-list" id="achievementRankingList">
                    <!-- 成就排行榜将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/lib/jquery.min.js}"></script>
    <script th:src="@{/js/lib/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/ranking.js}"></script>
    <script th:src="@{/js/navbar.js}"></script>
</body>
</html> 